<template>
    <select :value="value"  @change="$emit('change', $event.target.value)">
        <option v-for="op in options" :key="op.id" :value="op.id">{{op.name}}</option>
    </select>
</template>

<script>
    export default {
        name: 'mt-select',
        props: {
            value: {
                type: String,
                default: ''
            },
            options: {
                type: Array,
                default: () => []
            }
        }
    }
</script>

<style scoped lang="scss">
    select {
        width: 100%;
        border: none;
        background-color: #fff;
        background-image: none;
        box-sizing: border-box;
        display: inline-block;
        font-size: inherit;
        height: 40px;
        line-height: 40px;
        outline: none;
        padding: 0 15px;
        -webkit-appearance: none;
    }
</style>